
<template>
  <view class="bg main">
    <Header :menuSelect="'功率'" />
    <view class="container padd-24">
       <PowerCard 
              v-for="(item, index) in powerList"
              :key="index"
              :data="item"
              :index="index"
              @toggle="togglePower"
            />
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import PowerCard from '@/components/PowerCard.vue'
import Header from '@/components/header.vue'

interface PowerItem {
  title: string
  power: number
  powerFactor: number
  voltage: number
  maxPower: number
  status: 'on' | 'off' | 'error'
}

const powerList = ref<PowerItem[]>([
  {
    title: '主电机功率监测',
    power: 45.6,
    powerFactor: 0.92,
    voltage: 380,
    maxPower: 60,
    status: 'on'
  },
  {
    title: '辅助设备功率',
    power: 12.3,
    powerFactor: 0.85,
    voltage: 220,
    maxPower: 15,
    status: 'off'
  },
  {
    title: '照明系统功率',
    power: 5.2,
    powerFactor: 0.95,
    voltage: 110,
    maxPower: 8,
    status: 'on'
  },
  {
    title: '冷却系统功率',
    power: 8.9,
    powerFactor: 0.88,
    voltage: 220,
    maxPower: 10,
    status: 'error'
  },
  {
    title: '辅助设备功率',
    power: 12.3,
    powerFactor: 0.85,
    voltage: 220,
    maxPower: 15,
    status: 'off'
  },
  {
    title: '照明系统功率',
    power: 5.2,
    powerFactor: 0.95,
    voltage: 110,
    maxPower: 8,
    status: 'on'
  },
  {
    title: '冷却系统功率',
    power: 8.9,
    powerFactor: 0.88,
    voltage: 220,
    maxPower: 10,
    status: 'error'
  },
  {
    title: '冷却系统功率',
    power: 8.9,
    powerFactor: 0.88,
    voltage: 220,
    maxPower: 10,
    status: 'error'
  },
  {
    title: '照明系统功率',
    power: 5.2,
    powerFactor: 0.95,
    voltage: 110,
    maxPower: 8,
    status: 'on'
  }
])

const togglePower = (index: number, action: 'on' | 'off') => {
  if (powerList.value[index].status === 'error') {
    uni.showToast({ title: '设备故障无法操作', icon: 'none' })
    return
  }
  powerList.value[index].status = action
  uni.showToast({ title: `${action === 'on' ? '启动' : '关闭'}操作成功` })
}

</script>

<style scoped lang="scss">
.main {
  height: 100vh;
  
    .container {
      padding: 24px;
      display: flex;
      flex-wrap: wrap;
      gap:32rpx 72rpx;
  }
}
</style>
